// ********************************************     第四屏   ***********************************************
// 三个点击按钮
(function () {
  let but1 = document.querySelector(".buttons .but1");
  let but2 = document.querySelector(".buttons .but2");
  let but3 = document.querySelector(".buttons .but3");
  let but4 = document.querySelector(".buttons .but4");

  but1.addEventListener("click", function () {
    window.location.href = "./index.html";
    // $(mainbox2).hide();
    // $(mainbox2).hide();
    // $(mainbox).show();
  });
  but2.addEventListener("click", function () {
    window.location.href = "./屏幕2.html";
    // location.reload();
    // $(mainbox).hide();
    // $(mainbox2).show();
    // $("<li><li>");
  });
  but3.addEventListener("click", function () {
    window.location.href = "./屏幕3.html";
  });
  but4.addEventListener("click", function () {
    window.location.href = "./屏幕4.html";
  });
})();
// 数字模块4
// (function () {
//   let need = document.querySelector(".no-hd").querySelectorAll("li")[0];
//   let supply = document.querySelector(".no-hd").querySelectorAll("li")[1];
//   function getRandomInt(min, max) {
//     min = Math.ceil(min);
//     max = Math.floor(max);
//     return Math.floor(Math.random() * (max - min + 1)) + min;
//   }

//   function needSum() {
//     need.innerHTML = parseInt(need.innerHTML) + getRandomInt(1, 10);
//     // ***************

//     localStorage.setItem("lastname", need.innerHTML);
//     // Retrieve
//     need.innerHTML = localStorage.getItem("lastname");
//     // console.log(need.value);

//     // *************
//   }
//   function supplySum() {
//     supply.innerHTML = parseInt(supply.innerHTML) + getRandomInt(1, 10);
//   }
//   setInterval(needSum, 1500);
//   setInterval(supplySum, 2000);
// })();
// 图1
(function () {
  let location = [];
  let frequency = [];
  $.ajax({
    type: "get",
    url: "http://192.168.2.232:31279/ruan/CityPost",
    async: true,
    success: function (datas) {
      for (let i = 0; i < 8; i++) {
        location.push(datas[i].location);
        frequency.push(datas[i].frequency);
      }

      let myCharts = echarts.init(document.querySelector(".bar7 .chart"));
      let year = [
        "7月31",
        "7月30",
        "7月29",
        "7月28",
        "7月27",
        "7月26",
        "7月25",
        "7月24",
        "7月23",
        "7月22",
        "7月21",
        "7月20",
        "7月19",
        "7月18",
        "7月17",
        "7月16",
        "7月15",
        "7月14",
        "7月13",
        "7月12",
        "7月11",
        "7月10",
        "7月9",
        "7月8",
        "7月7",
        "7月6",
        "7月5",
        "7月4",
        "7月3",
        "7月2",
        "7月1",
        "6月31",
        "6月30",
        "6月29",
        "6月28",
        "6月27",
        "6月26",
        "6月25",
        "6月24",
        "6月23",
        "6月22",
        "6月21",
        "6月20",
        "6月19",
        "6月18",
        "6月17",
        "6月16",
        "6月15",
        "6月14",
        "6月13",
        "6月12",
        "7月11",
        "6月10",
        "6月9",
        "6月8",
        "7月7",
        "6月6",
        "6月5",
        "6月4",
        "6月3",
        "6月2",
        "6月1",
      ];
      let data = [
        frequency,
        [6840, 5540, 3900, 1390, 2540, 3460, 420, 700],
        [6720, 5520, 3700, 1230, 2590, 3470, 394, 320],
        [7590, 5480, 3700, 1020, 2400, 3490, 994, 230],
        [5570, 4600, 3510, 2610, 2300, 3640, 950, 010],
        [3403, 2440, 3350, 3330, 2260, 3530, 930, 710],
        [4310, 2530, 3220, 4180, 2250, 3640, 990, 560],
        [3120, 2240, 4170, 1020, 2260, 3390, 950, 370],
        [3070, 1070, 5130, 1740, 2200, 3360, 1140, 890],
        [3000, 1090, 3860, 1610, 2101, 3080, 1120, 740],
        [2980, 4800, 2640, 1330, 1920, 2980, 1090, 760],
        [2820, 3770, 2570, 1210, 1810, 2800, 1890, 721],
        [2790, 3670, 2460, 2780, 1780, 2640, 1850, 682],
        [2800, 3610, 2450, 3720, 1720, 2780, 1780, 682],
        [2760, 3590, 2410, 1450, 1710, 2740, 1780, 633],
        [2610, 3480, 2290, 1270, 1680, 2560, 1630, 590],
        [9975, 9870, 5550, 1875, 2257, 3560, 1300, 983],
        [3840, 4540, 2900, 1390, 2540, 3460, 1200, 970],
        [3720, 4520, 4700, 2230, 2590, 3470, 1940, 932],
        [3590, 4480, 5700, 1020, 2400, 3490, 1940, 920],
        [3570, 4600, 2510, 1610, 2300, 3640, 1650, 900],
        [3403, 4440, 3350, 3330, 2260, 3530, 1630, 870],
        [3310, 4530, 1220, 2180, 2250, 3640, 1390, 850],
        [3120, 4240, 2170, 1020, 2260, 3390, 1250, 830],
        [3070, 4070, 3130, 1740, 2200, 3360, 1140, 800],
        [3000, 4090, 2860, 1610, 2101, 3080, 1120, 770],
        [9975, 2870, 1550, 1875, 2257, 3560, 1300, 980],
        [3840, 4540, 2900, 1390, 2540, 3460, 1200, 970],
        [3720, 4520, 5700, 1230, 2590, 3470, 1940, 930],
        [3590, 4480, 2700, 4020, 2400, 3490, 1940, 920],
        [3570, 4600, 2510, 1610, 2300, 3640, 1650, 900],
        [3403, 4440, 3350, 1330, 2260, 3530, 1630, 870],
        [3310, 4530, 1220, 7180, 2250, 3640, 1390, 850],
        [3120, 4240, 4170, 7020, 2260, 3390, 1250, 830],
        [3070, 4070, 2130, 6740, 2200, 3360, 1140, 800],
        [3000, 4090, 2860, 6610, 2101, 3080, 1120, 770],
        [9975, 9870, 1550, 5875, 2257, 3560, 1300, 980],
        [3840, 4540, 3900, 8390, 2540, 3460, 1200, 970],
        [3720, 4520, 3700, 8230, 2590, 3470, 1940, 930],
        [3590, 4480, 2700, 8020, 2400, 3490, 1940, 920],
        [3570, 4600, 1510, 7610, 2300, 3640, 1650, 900],
        [3403, 4440, 2350, 7330, 2260, 3530, 1630, 870],
        [3310, 4530, 3220, 7180, 2250, 3640, 1390, 850],
        [3120, 4240, 3170, 7020, 2260, 3390, 1250, 830],
        [3070, 4070, 1130, 6740, 2200, 3360, 1140, 800],
        [3000, 4090, 5860, 6610, 2101, 3080, 1120, 770],
        [9975, 9870, 1550, 5875, 2257, 3560, 1300, 980],
        [3840, 4540, 3900, 8390, 2540, 3460, 1200, 970],
        [3720, 4520, 1700, 8230, 2590, 3470, 1940, 930],
        [3590, 4480, 2700, 8020, 2400, 3490, 1940, 920],
        [3570, 4600, 3510, 7610, 2300, 3640, 1650, 900],
        [3403, 4440, 2350, 7330, 2260, 3530, 1630, 870],
        [3310, 4530, 2220, 7180, 2250, 3640, 1390, 850],
        [3120, 4240, 2170, 7020, 2260, 3390, 1250, 830],
        [3070, 4070, 2130, 6740, 2200, 3360, 1140, 800],
        [3000, 4090, 2860, 6610, 2101, 3080, 1120, 770],
        [1620, 2150, 2503, 2051, 1008, 1013, 1040, 253],
        [4590, 1920, 2404, 2010, 1001, 1009, 1304, 203],
        [4400, 1980, 2340, 2060, 640, 990, 1210, 196],
        [4200, 2130, 2200, 2060, 1200, 830, 1180, 186],
        [4190, 1920, 2130, 1930, 1700, 1000, 1200, 142],
        [5200, 2060, 2920, 1500, 1500, 1000, 1000, 120],
      ];
      // 指定图表的配置项和数据
      let option = {
        color: "#5673cb",
        title: {
          left: "right",
          textStyle: {
            color: "#4d8de5",
            fontSize: "18",
          },
        },
        tooltip: {},
        legend: {},
        grid: {
          top: "25",
          left: 35,
          right: 112,
          bottom: "-10",
          containLabel: false,
        },

        yAxis: {
          data: location,
          inverse: true,
        },
        xAxis: {
          show: false,
        },
        axisLabel: {
          color: "#FFF",
          fontSize: "s",
        },

        series: [
          {
            realtimeSort: true,
            name: "",
            showBackground: true,
            label: {
              show: true,
              position: "right",
              valueAnimation: true,
            },

            stack: {},
            type: "bar",
            data: [800, 700, 600, 500, 400, 300, 200, 150],
          },
        ],
        animationDuration: 0,
        animationDurationUpdate: 500,
        animationEasing: "linear",
        animationEasingUpdate: "linear",
      };

      // 使用刚指定的配置项和数据显示图表。
      myCharts.setOption(option);

      for (let i = 0; i < data.length; i++) {
        setTimeout(function () {
          let option1 = {
            title: {
              text: year[data.length - i - 1].toString() + "日",
            },
            series: [
              {
                data: data[data.length - i - 1],
              },
            ],
          };

          myCharts.setOption(option1);
        }, 800 * i);
      }
      window.addEventListener("resize", function () {
        myCharts.resize();
      });
    },
  });
})();
// 图二
(function () {
  let location = [];
  let frequency = [];
  let datas = [];
  $.ajax({
    type: "get",
    url: "http://192.168.2.232:31279/ruan/CityPostNum",
    async: true,
    success: function (datas) {
      for (let i = 0; i < 20; i++) {
        location.push(datas[i].location);

        // frequency.push(datas[i].frequency);
        datas.push({ value: 20, name: location[i] });
      }
      datas.reverse();

      let myCharts = echarts.init(document.querySelector(".bar8 .chart"));
      let option = {
        series: [
          {
            type: "treemap",
            width: "100%",
            height: "100%",
            // opacity: 1,
            top: "2%",
            roam: false, //是否开启拖拽漫游（移动和缩放）
            nodeClick: false, //点击节点后的行为,false无反应
            breadcrumb: {
              show: false,
            },
            label: {
              //描述了每个矩形中，文本标签的样式。
              normal: {
                show: true,
                position: ["20%", "20%"],
                //
              },
            },
            itemStyle: {
              normal: {
                show: true,
                textStyle: {
                  color: "#666666",
                  fontSize: 12,
                },
                borderWidth: 8,
                borderColor: "#081543",
              },

              emphasis: {
                label: {
                  show: true,
                },
              },
            },
            data: datas,
          },
        ],
      };
      myCharts.setOption(option);
      window.addEventListener("resize", function () {
        myCharts.resize();
      });
    },
  });
})();
// 图三
(function () {
  let location = [];
  let frequency = [];
  let data = [];
  let avgPay = [];
  $.ajax({
    type: "get",
    url: "http://192.168.2.232:31279/ruan/CityPost",
    async: true,
    success: function (datas) {
      for (let i = 0; i < 5; i++) {
        location.push(datas[i].location);
        //同比例放大三倍显示效果更好，不影响数据
        frequency.push(datas[i].frequency * 3);
        avgPay.push(datas[i].avgPay);
        data.push({
          text: location[i],
          max: 50000,
        });
      }

      let myCharts = echarts.init(document.querySelector(".line7 .chart"));
      let option = {
        color: ["#00c2ff", "#f9cf67", "#e92b77"],
        legend: {
          show: true,
          // icon: 'circle',//图例形状
          bottom: -5,
          center: 0,
          itemWidth: 10, // 图例标记的图形宽度。[ default: 25 ]
          itemHeight: 10, // 图例标记的图形高度。[ default: 14 ]
          itemGap: 21, // 图例每项之间的间隔。[ default: 10 ]横向布局时为水平间隔，纵向布局时为纵向间隔。
          textStyle: {
            fontSize: 14,
            color: "#ade3ff",
          },
        },
        radar: [
          {
            indicator: data,

            textStyle: {
              color: "red",
            },
            center: ["50%", "50%"],
            radius: 80,
            startAngle: 90,
            splitNumber: 3,
            orient: "horizontal", // 图例列表的布局朝向,默认'horizontal'为横向,'vertical'为纵向.
            // shape: 'circle',
            // backgroundColor: {
            //     image:imgPath[0]
            // },
            name: {
              formatter: "{value}",
              textStyle: {
                fontSize: 14, //外圈标签字体大小
                color: "#5b81cb", //外圈标签字体颜色
              },
            },
            splitArea: {
              // 坐标轴在 grid 区域中的分隔区域，默认不显示。
              show: true,
              areaStyle: {
                // 分隔区域的样式设置。
                color: ["#141c42", "#141c42"], // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
              },
            },
            // axisLabel:{//展示刻度
            //     show: true
            // },
            axisLine: {
              //指向外圈文本的分隔线样式
              lineStyle: {
                color: "#153269",
              },
            },
            tooltip: {},
            splitLine: {
              lineStyle: {
                color: "#113865", // 分隔线颜色
                width: 1, // 分隔线线宽
              },
            },
          },
        ],
        series: [
          {
            name: "雷达图",
            type: "radar",
            itemStyle: {
              emphasis: {
                lineStyle: {
                  width: 4,
                },
              },
            },
            data: [
              {
                name: "薪资",
                value: avgPay,
                areaStyle: {
                  normal: {
                    // 单项区域填充样式
                    color: {
                      type: "linear",
                      x: 0, //右
                      y: 0, //下
                      x2: 1, //左
                      y2: 1, //上
                      colorStops: [
                        {
                          offset: 0,
                          color: "#00c2ff",
                        },
                        {
                          offset: 0.5,
                          color: "rgba(0,0,0,0)",
                        },
                        {
                          offset: 1,
                          color: "#00c2ff",
                        },
                      ],
                      globalCoord: false,
                    },
                    opacity: 1, // 区域透明度
                  },
                },
                symbolSize: 2.5, // 单个数据标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10。
                label: {
                  // 单个拐点文本的样式设置
                  normal: {
                    show: true, // 单个拐点文本的样式设置。[ default: false ]
                    position: "top", // 标签的位置。[ default: top ]
                    distance: 2, // 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。[ default: 5 ]
                    color: "#6692e2", // 文字的颜色。如果设置为 'auto'，则为视觉映射得到的颜色，如系列色。[ default: "#fff" ]
                    fontSize: 14, // 文字的字体大小
                    formatter: function (params) {
                      return params.value;
                    },
                  },
                },
                itemStyle: {
                  normal: {
                    //图形悬浮效果
                    borderColor: "#00c2ff",
                    borderWidth: 2.5,
                  },
                },
                // lineStyle: {
                //     normal: {
                //         opacity: 0.5// 图形透明度
                //     }
                // }
              },
              {
                name: "岗位量",
                value: frequency,
                symbolSize: 2.5,
                itemStyle: {
                  normal: {
                    borderColor: "#f9cf67",
                    borderWidth: 2.5,
                  },
                },
                areaStyle: {
                  normal: {
                    // 单项区域填充样式
                    color: {
                      type: "linear",
                      x: 0, //右
                      y: 0, //下
                      x2: 1, //左
                      y2: 1, //上
                      colorStops: [
                        {
                          offset: 0,
                          color: "#f9cf67",
                        },
                        {
                          offset: 0.5,
                          color: "rgba(0,0,0,0)",
                        },
                        {
                          offset: 1,
                          color: "#f9cf67",
                        },
                      ],
                      globalCoord: false,
                    },
                    opacity: 1, // 区域透明度
                  },
                },
                // lineStyle: {
                //     normal: {
                //         opacity: 0.5// 图形透明度
                //     }
                // }
              },
            ],
          },
        ],
      };
      myCharts.setOption(option);
      window.addEventListener("resize", function () {
        myCharts.resize();
      });
    },
  });
})();
// 图四
(function () {
  let avgPay = [];
  let avgPay1 = [];
  let avgPay2 = [];
  let avgPay3 = [];
  let frequency = [];
  let location = [];
  let frequency1 = [];
  let frequency2 = [];
  let frequency3 = [];
  $.ajax({
    type: "get",
    url: "http://192.168.2.232:31279/ruan/CityPost",
    async: true,
    success: function (datas) {
      for (let i = 0; i < 15; i++) {
        location.push(datas[i].location);
        avgPay.push(datas[i].avgPay / 1000);
        frequency.push(datas[i].frequency / 1000);
        frequency[i] = frequency[i].toFixed(1);
      }
      for (let i = 0; i < 5; i++) {
        frequency1.push(datas[i].frequency / 1000);
        frequency1[i] = frequency1[i].toFixed(1);
        frequency2.push(datas[5 + i].frequency / 1000);
        frequency2[i] = frequency2[i].toFixed(1);
        frequency3.push(datas[10 + i].frequency / 1000);
        frequency3[i] = frequency3[i].toFixed(1);
        avgPay1.push(datas[i].avgPay / 1000);
        avgPay1[i] = avgPay1[i].toFixed(1);
        avgPay2.push(datas[5 + i].avgPay / 1000);
        avgPay2[i] = avgPay2[i].toFixed(1);
        avgPay3.push(datas[10 + i].avgPay / 1000);
        avgPay3[i] = avgPay3[i].toFixed(1);
      }

      let myCharts = echarts.init(document.querySelector(".line8 .chart"));

      let myData = ["北京", "上海", "深圳", "广州", "杭州"];
      let databeast = {
        5: frequency1,

        6: frequency2,
        7: frequency3,
      };
      let databeauty = {
        5: avgPay1,
        6: avgPay2,
        7: avgPay3,
        // 8: [
        //   389, 259, 262, 324, 232, 176, 196, 214, 133, 370, 268, 360, 185, 392, 392,
        //   153,
        // ],
      };
      let timeLineData = [5, 6, 7];

      let option = {
        baseOption: {
          title: {
            text: "单位：K",
            textStyle: {
              color: "#c23531",
              fontSize: 14,
            },
            top: "0",
            right: "80",
          },
          timeline: {
            show: true,
            axisType: "category",
            tooltip: {
              show: true,
              formatter: function (params) {
                console.log(params);
                return params.databeauty + "K";
              },
            },
            autoPlay: true,
            currentIndex: 6,
            playInterval: 1000,

            label: {
              normal: {
                show: true,
                interval: "auto",
                formatter: "{value}月",
              },
            },
            data: [],
          },

          legend: {
            data: ["岗位数量", "薪资待遇"],
            top: 2,
            left: "center",
            textStyle: {
              color: "#2a87ea",
            },
          },

          grid: [
            {
              show: false,
              left: "4%",
              top: 30,
              bottom: 60,
              containLabel: true,
              width: "40%",
            },
            {
              show: false,
              left: "50.5%",
              top: 55,
              bottom: 60,
              width: "0%",
            },
            {
              show: false,
              right: "4%",
              top: 30,
              bottom: 60,
              containLabel: true,
              width: "42%",
            },
          ],

          xAxis: [
            {
              type: "value",
              inverse: true,
              axisLine: {
                show: false,
              },

              axisTick: {
                show: false,
              },
              position: "top",
              axisLabel: {
                show: true,
                textStyle: {
                  color: "#B2B2B2",
                  fontSize: 14,
                },
              },
              splitLine: {
                show: true,
                lineStyle: {
                  color: "#1F2022",
                  width: 1,
                  type: "solid",
                },
              },
            },
            {
              gridIndex: 1,
              show: false,
            },
            {
              gridIndex: 2,
              type: "value",
              axisLine: {
                show: false,
              },
              axisTick: {
                show: false,
              },

              position: "top",
              axisLabel: {
                show: true,
                textStyle: {
                  color: "#B2B2B2",
                  fontSize: 14,
                },
              },
              splitLine: {
                show: true,
                lineStyle: {
                  color: "#1F2022",
                  width: 1,
                  type: "solid",
                },
              },
            },
          ],
          yAxis: [
            {
              type: "category",
              inverse: true,
              position: "right",
              axisLine: {
                show: false,
              },

              axisTick: {
                show: false,
              },
              axisLabel: {
                show: false,
                margin: 8,
                textStyle: {
                  color: "#9D9EA0",
                  fontSize: 12,
                },
              },
              data: myData,
            },
            {
              gridIndex: 1,
              type: "category",
              inverse: true,
              position: "left",
              axisLine: {
                show: false,
              },
              axisTick: {
                show: false,
              },
              axisLabel: {
                // 中间的文字
                show: true,
                textStyle: {
                  color: "#5798ea",
                  fontSize: 14,
                },
              },

              data: myData.map(function (value) {
                return {
                  value: value,
                  textStyle: {
                    align: "center",
                  },
                };
              }),
            },
            {
              gridIndex: 2,
              type: "category",
              inverse: true,
              position: "left",
              axisLine: {
                show: false,
              },
              axisTick: {
                show: false,
              },
              axisLabel: {
                show: false,
                textStyle: {
                  color: "#9D9EA0",
                  fontSize: 12,
                },
              },
              data: myData,
            },
          ],
          series: [],
        },

        options: [],
      };

      for (let i = 0; i < timeLineData.length; i++) {
        option.baseOption.timeline.data.push(timeLineData[i]);
        option.options.push({
          series: [
            {
              name: "岗位数量",
              type: "bar",
              barGap: 20,
              barWidth: 10,
              label: {
                normal: {
                  show: false,
                },
                emphasis: {
                  show: true,
                  position: "left",
                  offset: [0, 0],
                  textStyle: {
                    color: "#fff",
                    fontSize: 14,
                  },
                },
              },
              itemStyle: {
                normal: {
                  color: "#659F83",
                },
                emphasis: {
                  color: "#08C7AE",
                },
              },
              data: databeast[timeLineData[i]],
            },

            {
              name: "薪资待遇",
              type: "bar",
              barGap: 20,
              barWidth: 10,
              xAxisIndex: 2,
              yAxisIndex: 2,
              label: {
                normal: {
                  show: false,
                },
                emphasis: {
                  show: true,
                  position: "right",
                  offset: [0, 0],
                  textStyle: {
                    color: "#fff",
                    fontSize: 14,
                  },
                },
              },
              itemStyle: {
                normal: {
                  color: "#F68989",
                },
                emphasis: {
                  color: "#F94646",
                },
              },
              data: databeauty[timeLineData[i]],
            },
          ],
        });
      }
      myCharts.setOption(option);
      window.addEventListener("resize", function () {
        myCharts.resize();
      });
    },
  });
})();
// 图五
(function () {
  let location = [];
  let frequency = [];
  let data1 = [];
  $.ajax({
    type: "get",
    url: "http://192.168.2.232:31279/ruan/CityPostNum",
    async: true,
    success: function (datas) {
      for (let i = 0; i < 20; i++) {
        location.push(datas[i].location);
        frequency.push(datas[i].frequency);
        data1.push({ value: frequency[i], name: location[i] });
      }

      let myCharts = echarts.init(document.querySelector(".pie7 .chart"));
      let option = {
        tooltip: {},
        series: [
          {
            name: "大数据行业热门城市TOP20",
            type: "pie",
            radius: [20, 100],
            center: ["50%", "50%"],
            roseType: "area",
            itemStyle: {
              borderRadius: 8,
            },
            // 文字调整
            label: {
              fontSize: 12,
            },
            // 引导线调整
            labelLine: {
              // 连接扇形图线长
              length: 3,
              // 连接文字线长
              length2: 8,
            },

            data: data1,
          },
        ],
      };
      myCharts.setOption(option);
      window.addEventListener("resize", function () {
        myCharts.resize();
      });
    },
  });
})();
(function () {
  let location = [];
  let frequency = [];
  $.ajax({
    type: "get",
    url: "http://192.168.2.232:31279/ruan/CityPostNum",
    async: true,
    success: function (datas) {
      for (let i = 0; i < datas.length; i++) {
        location.push(datas[i].location);
        frequency.push(datas[i].frequency);
      }

      let myCharts = echarts.init(document.querySelector(".pie8 .chart"));
      let chartdata = [];
      let size = [
        50, 60, 70, 80, 90, 50, 60, 70, 80, 90, 50, 60, 70, 80, 90, 50, 60, 70,
        80, 90, 50, 60, 70, 80, 90, 50, 60, 70, 80, 90,
      ];
      for (let i = 0; i < location.length; i++) {
        chartdata.push({ name: location[i], sum: frequency[i], size: size[i] });
      }
      let color = [
        "#6DFFA1",
        "#56ffF6",
        "#F9F08A",
        "#645FA1",
        "#5612F6",
        "#F1258A",
        "#6FA221",
        "#654299",
        "#F42600",
        "#665FA1",
        "#5557F6",
        "#F7708A",
        "#624FA1",
        "#56C742",
        "#F6508A",
        "#6D77A1",
        "#5654F6",
        "#78F08A",
        "#86FFA1",
        "#669999",
        "#776600",
        "#68FFA1",
        "#77C7F6",
        "#54F08A",
        "#6DFFA1",
        "#56ffF6",
        "#F9F08A",
        "#645FA1",
        "#5612F6",
        "#F1258A",
        "#6FA221",
        "#654299",
        "#F42600",
        "#665FA1",
        "#5557F6",
        "#F7708A",
        "#624FA1",
        "#56C742",
        "#F6508A",
        "#6D77A1",
        "#5654F6",
        "#78F08A",
        "#86FFA1",
        "#669999",
        "#776600",
        "#68FFA1",
        "#77C7F6",
        "#54F08A",
      ];
      let data = [];

      chartdata.map((item, index) => {
        data.push({
          name: item.name + "\n\n" + item.sum,
          value: 111,
          symbolSize: item.size,
          draggable: true,
          label: {
            normal: {
              textStyle: {
                fontSize: 12,
                color: "#fff",
              },
            },
          },
          itemStyle: {
            normal: {
              color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
                {
                  offset: 0.2,
                  color: "rgba(27, 54, 72, 0.2)",
                },
                {
                  offset: 0.8,
                  color: color[index],
                },
              ]),
              opacity: 1,
              borderWidth: 1,
              borderColor: color[index],
              shadowBlur: 7,
              symbolOffset: 0.6,
              shadowColor: color[index],
            },
          },
        });
      });

      let option = {
        animationDurationUpdate: function (idx) {
          return idx * 100;
        },
        tooltip: {
          trigger: "item",
          formatter: function (params, ticket, callback) {
            return params.data.tips || params.name;
          },
        },
        animationEasingUpdate: "bounceIn",
        itemStyle: {
          // color: 'red',
        },
        cursor: "pointer",
        series: [
          {
            type: "graph",
            layout: "force",
            cursor: "pointer",
            force: {
              repulsion: 100,
              edgeLength: 100,
            },
            roam: true,
            label: {
              normal: {
                show: true,
              },
            },

            data,
          },
        ],
      };
      myCharts.setOption(option);
      window.addEventListener("resize", function () {
        myCharts.resize();
      });
    },
  });
})();
